<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="peng">彭于晏</div>
    <div id="zyx">张艺兴</div>

    <p>
        我是周杰伦
        <strong>会唱双截棍</strong>
    </p>

    <script>
        /* 
        innerHTML :对H5的代码进行渲染，
        innerText :只识别文本。
        */
       let z = document.querySelector('p');
       console.dir(z); 

       // 读
       console.log(z.innerHTML);
       console.log(z.innerText);

       //写

       let peng = document.querySelector('#peng');
  let zyx = document.querySelector('#zyx');

    zyx.innerText = '<strong>会唱双截棍</strong>';
    

      peng.onclick= function () {
    peng.innerHTML = '<strong>会唱双截棍</strong>';
    
      }
    </script>
</body>

</html>